<template>
  <div style="padding: 0">
    <el-form inline>
      <el-form-item>
        <el-input style="background-color: #f5f7f9;width: 260px;height: 40px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="large" style="background-color: #f5f7f9">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>

  <div style="padding: 0">
    <el-card shadow="hover" style="width: 100%;font-size: 15px">
      <el-row
          v-for="col in collectionsList"
          :key="col.id"
          style="margin-bottom: 30px;border-bottom: 1px solid;padding-bottom: 15px;"
      >
        <el-col :span="5">
          <div class="grid-content ep-bg-purple">
            <el-image
                :src="col.momentBackup.cover[0]"
                style="height: 105px;width: 180px"></el-image>
          </div>
        </el-col>
        <el-col :span="17" style="margin-left: 15px;">
          <div class="grid-content ep-bg-purple-light">
            <div style="margin-bottom: 15px">
<!--              https://www.dance365.com/detail/video?momentId=faeaa10131fa4a6292468c9302897ec7-->
              <a style="cursor:pointer" :href="`https://www.dance365.com/detail/video?momentId=${col.momentId}`" target="_blank">{{ col.momentTitle }}</a>
            </div>
            <div style="margin-bottom: 15px"> 动态</div>
            <div style="margin-bottom: 15px">
              <img
                  :src='col.momentBackup.creatorBackup.avatar'
                  style="border-radius: 50%;height: 30px;width:30px;margin-right: 15px;vertical-align: middle">
              <a style="cursor:pointer">{{ col.momentBackup.creatorBackup.name }}</a></div>
          </div>
        </el-col>
        <el-col :span="1">
          <div class="grid-content ep-bg-purple">
            <div class="delBtn">
              <el-button>删除</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!--    <el-pagination-->
    <!--        v-model:currentPage="page"-->
    <!--        v-model:page-size="limit"-->
    <!--        :total="total"-->
    <!--        :page-sizes="[3, 6, 9]"-->
    <!--        layout="prev, pager, next, jumper, -> , sizes, total"-->
    <!--        @size-change="handleSizeChange"-->
    <!--        @current-change="handleCurrentChange" />-->
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {getCollectionsPage} from "@/api/trainingRoom";
import {ElMessage} from "element-plus";

const collectionsList = ref([])
const initCollectionsList = async () => {
  try {
    const res = await getCollectionsPage()
    console.log(77, res.data.content)
    collectionsList.value = res.data.content
  } catch (error) {
    console.log(error)
    ElMessage.error('获取收藏页失败')
  }
}
onMounted(() => {
  initCollectionsList()
})
</script>

<style scoped>

</style>
